import React, {useEffect, useState} from 'react';
import {addStuApi, editStuByIdApi, getStuByIdApi} from "../api/stuApi";
import {useNavigate, useParams} from "react-router-dom";

function AddOrEdit(props) {
    const navigate = useNavigate()
    const {id} = useParams();
    const [stu, setStu] = useState({
        name: '',
        age: '',
        education: '本科',
        profile: ''
    })
    useEffect(() => {
        getStuByIdApi(id).then(({data})=> {
            setStu(data)
        })
    }, [id]);
    const handleSubmit = (e) => {
        e.preventDefault()
        for (const key in stu) {
            if (!stu[key]) {
                alert(`请完善表单的${key === 'name' ? '姓名' : key === 'age' ? '年龄' :
                    key === 'education' ? '学历' : key === 'profile' ? '个人简历' : '所有'}项`)
            }
        }

        if (id) {
            editStuByIdApi(id, stu).then(()=> {
                navigate('/home', {
                    state: {
                        alert: '学生修改成功',
                        type: 'success'
                    }
                })
            })
        } else {
            addStuApi(stu).then(()=> {
                // 这里路径必须是 /home 因为如果从 / -> /home 的话 location 并不会传递
                navigate('/home', {
                    state: {
                        alert: '用户添加成功',
                        type: 'success'
                    }
                })
            });
        }
    }

    function updateUser(value, name) {
        if (name === 'age' && isNaN(value)) {
            return
        }
        // 这种写法是不对的！！！
        // setStu({
        //     ...stu,
        //     name: value.trim()
        // });
        // 这种写法是对的！！！
        const newStuInfo = {...stu}
        // 因为 name 是一个字符串 需要使用 obj[key] 进行更改属性
        newStuInfo[name] = value.trim()
        setStu(newStuInfo)
    }

    return (
        <div className="container">
            <h1 className="page-header">{id ? '修改用户' : '添加用户'}</h1>
            <form id="myForm" onSubmit={handleSubmit}>
                <div className="well">
                    <div className="form-group">
                        <label>姓名</label>
                        <input type="text" className="form-control" placeholder="请填写用户姓名"
                               value={stu.name} onChange={e => updateUser(e.target.value, 'name')}
                        />
                    </div>
                    <div className="form-group">
                        <label>年龄</label>
                        <input type="text" className="form-control" placeholder="请填写用户年龄"
                               value={stu.age} onChange={e => updateUser(e.target.value, 'age')}
                        />
                    </div>
                    <div className="form-group">
                        <label>学历</label>
                        <select className="form-control"
                                value={stu.education} onChange={e => updateUser(e.target.value, 'education')}
                        >
                            <option>大专</option>
                            <option>本科</option>
                            <option>硕士</option>
                        </select>
                    </div>
                    <div className="form-group">
                        <label>个人简介</label>
                        <textarea className="form-control" rows="10" placeholder="请简单的介绍一下自己"
                                  value={stu.profile} onChange={e => updateUser(e.target.value, 'profile')}
                        />
                    </div>
                    <button type="submit" className="btn btn-primary">{id ? '确认修改' : '确认添加'}</button>
                </div>
            </form>
        </div>
    );
}

export default AddOrEdit;